*{
    margin: 0;
    padding: 0;
}
a,li{
    list-style: none;
    text-decoration: none;
}
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #1D2939;
    padding: 0 0.2rem;
    font-family: 'pingfang SC','helvetica neue',arial,'hiragino sans gb','microsoft yahei ui','microsoft yahei',simsun,sans-serif;
    font-size: 0.24rem;
}
h6{
    font-size: 0.35rem;
    color:#01D2F2;
}
h5{
    font-size: 0.4rem;
    color:#0DFFFD;
}
/* 标题 */
.Safe-title{
    height: 5%;
    padding: 0.2rem 0;
    text-align: center;
}
/* 内容 */
.Safe{
    height: 100%;
    display: flex;
    justify-content: space-between;
}
/* .Safe-left,.Safe-right{
   height: 100%;
} */
/* 左边 */
.Safe-left{
    background-color: rgba(255,255,255,0.05);
    padding: 0.2rem;
    margin-right:0.3rem;
    width: 25%;
}
.SafeL-head,.SafeL-nav{
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
}
.SafeL-head li{
    width: 28%;
    background: rgba(255,255,255,0.05);
    text-align: center;
    padding: 0.05rem;
}
.SafeL-head p:nth-of-type(1){
    color:#e2ffff;
    font-size: 0.45rem;
}
.SafeL-head p:nth-of-type(2){
    color:#9fd5b9;
    font-size: 0.2rem;
}
.SafeL-nav li{
    padding: 0.1rem;
    width: 49%;
    border:1px solid #1a3b49;
    background-color: rgba(23,53,61,0.1)

}
.pic{
    display: flex;  
}

.SafeL-nav li:nth-of-type(2){
    margin-left: 0.2rem;
}
.SafeL-ti{
    font-size: 0.2rem;
    color:#f2f2f3;
    width: 50%;
    background-color: #0e4f63;
    text-indent: 0.16rem;
}
.SafeL-bottom{
    display: flex;
    justify-content: space-between;
}
.SafeL-bottom h6{
    margin-top: 0.1rem;
}

.SafeLb-right p:nth-of-type(1){
    font-size: 0.24rem;
    color:#ccc;
}

.SafeLb-right .pic p{
    color:#fff;
    font-size: 0.28rem;
    margin-right: 0.05rem;
}
.SafeLb-right .pic img{
    width: 0.3rem;
}
.SafeL-cont{
    margin-top: 0.4rem;
    height: 25%;
    overflow: hidden;
}
.SafeL-cont ul{
    width: 100%;
    height:80%;
    display: flex;
    justify-content: space-between;
    margin-top: 0.2rem;
}
.SafeLc-left{
    width: 1.2rem;
    padding: 0.06rem 0.2rem;
    border: 1px solid #0e4f63;
    background-color: rgba(23,57,78,0.4);
    text-align: center;
    font-size: 0.24rem;
    color:#f2f2f3;
    margin-bottom: 0.2rem;
}
.SafeL-cont li{
    width: 49%;
    height: 100%;
}
.SafeL-cont li:nth-of-type(1){
    border-right: 1px solid #fafafa;
}
#c1,#c2{
    /* padding-right: 0.1rem; */
    top: -0.5rem;
    
}
/* 告警列表 */
.SafeL-foot{
    margin-top: 0.5rem;

}
.SafeL-foot ul{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    border-top: 1px solid #174c47;
    /* padding-right:0.3rem ; */
}
.SafeL-foot ul:nth-of-type(1){
    background-color: #18373c;
    margin-top: 0.2rem;
}   
.SafeL-foot ul:nth-of-type(1) li{
    font-size: 0.24rem;
    color:#ccc !important;
    
}
.SafeL-foot li{
    font-size: 0.32rem; 
    padding: 0.05rem;
}
.SafeL-foot .ul{
    border-bottom: 1px solid #174c47;
}
.SafeL-foot ul li{
    color: #0deae0;
}
.SafeL-foot ul li:nth-of-type(1){
    font-size: 0.24rem;
    color:#fff;
}
/* 中间上部 */
.Safe-content{
    width: 45%;
    box-sizing: border-box;
    margin-right: 0.3rem;
}
.SafeC-top{
    height: 23%;
    overflow: hidden;
}
.SafeC-top ul{
    height: 100%;
    display: flex;
    justify-content: space-between;
}
#c3,#c4{
    position: relative;
    top:-0.5rem;
}

.SafeC-top li{
    width: 46%;
    height: 100%;
    background-color: rgba(255,255,255,0.05);
    padding: 0.2rem;
    /* height: 3rem; */
    /* margin-right: 0.3rem; */
}
.SafeC-top h6{
    margin-bottom: 0.2rem;
}
/* 中间下面 */
.SafeC-bottom{
    width: 100%;
    height: 82%;
}
.SafeC-bottom .main{
    width: 20%;
    height: 25%;
    overflow: hidden;
    position: absolute;
    right:9rem;
    bottom: 0.3rem;
}
#china_map{
    position: relative;
    /* height: 100%; */
}
/* 右边 */
/* 右边上部 */
.SafeR-top{
    padding: 0.2rem 0.4rem 0.2rem 0.2rem;
}

.Safe-right{
    width: 28%;
    margin-left:0.1rem;
}
.SafeR-top,.SafeR-bottom,.SafeR-cont{
    background-color: rgba(255,255,255,0.05);
    height: 28.5%;
}
.SafeR-bottom{
    height: 31%;
}
.SafeR-cont{
    height: 30%;
}
.SafeR-t{
    display: flex;
    flex-wrap: wrap;
    border-top:1px solid #ccc ;
    border-bottom:1px solid #ccc ;
    margin-top: 0.1rem;
    padding-left: 0.2rem;
}
.SafeR-t li{
    width: 45%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.1rem;
    margin: 0.1rem 0.2rem 0.1rem 0;
    background-color: #1c4151;
}
.SafeR-t li p:nth-of-type(1){
    font-size: 0.24rem;
    color:#9fd5b9;   
}
.SafeR-t li p:nth-of-type(2){
    font-size: 0.36rem;
    color:#fafafa;   
}
.SafeRT-bottom{
    width: 100%;
    height: 50%;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    margin-top: 0.1rem;
    /* height: 2.5rem; */
}
.SafeRT-bottom li:nth-of-type(1){
    width: 59%;
    height: 100%;
    border-right:1px solid #ccc;
    overflow: hidden;
}
.SafeRT-bottom li:nth-of-type(2){
    width: 39%;
    height: 100%;
    margin-left: 0.2rem;
}
.SafeRT-bottom li p,.SafeRb-p,.SafeRt-bottom>p{
    width: 2rem;
    padding: 0.06rem;
    border: 1px solid #0A4F4D;
    font-size: 0.24rem;
    color:#ccc;
    background-color: #14272e;
}
#main{
    background-color: rgba(255, 255,255, 0.05) !important;
}
#box,#Bbox{
    position: relative;
    top:-0.6rem;
    
}
.SafeRb-ul{
    width: 100%;
    margin-top: 0.1rem;
}
.SafeRT-bottom .SafeRb-ul li{
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.24rem;
    /* padding:1px 3px 1px 8px; */
    background-color: #1c4151;
    margin-top: 0.04rem;
    height: 0.24rem;
}
.SafeRb-ul li:nth-of-type(1){
    border-left: 7px solid #29a479;
}
.SafeRb-ul li:nth-of-type(2){
    border-left: 7px solid #244dc0;
    margin-left:0 ;
}
.SafeRb-ul li:nth-of-type(3){
    border-left: 7px solid #f47153;
}
.SafeRb-ul div:nth-of-type(1){
    color:#fafafa;
    transform: scale(0.6);
}
.SafeRb-ul div:nth-of-type(2){
    color:#5BEFFD;
    transform: scale(0.6);
}
.SafeRb-num{
    margin-left: -0.26rem;
}
.SafeRb-ul div:nth-of-type(3){
    color:#29a479;
    transform: scale(0.6);
}
/* 右边中间 */
.SafeR-cont,.SafeR-bottom{
    /* width: 100%; */
    margin-top: 0.1rem;
    background-color: rgba(255, 255,255, 0.05);
    padding: 0.2rem 0.4rem 0.2rem 0.2rem;
    
}
.SafeR-bottom{
    /* height: 220px; */
    overflow: hidden;
}
.SafeR-cont ul{
    border: none;
}
.SafeR-cont .SafeRc-div{
    display: block;
    background-color: transparent;
    padding:0;
    width: 47%;
}
.SafeRc-div div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1c4151;
    padding:0.07rem;
    padding-left: 0.1rem;
    
}
.SafeRc-div div:nth-of-type(1){
    margin-bottom: 0.06rem;
}
.SafeRc-div div p:nth-of-type(2){
    font-size: 0.32rem;
}
.SafeRt-bottom{
    width: 100%;
    height: 50%;
    box-sizing: border-box;
}
.SafeRc-huan{
    height:90%;
    display: flex;
}
.SafeRc-huan ul{
    width: 25%;
    height: 75%;
    margin-left: 0.3rem;
}
.SafeRc-huan li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 70%;
    border-left: 2px solid #29a479;
    background-color:#1c4151;
    margin-top: 0.04rem;
    font-size: 0.16rem;
    padding:0 0.06rem
}
.SafeRc-huan li p:nth-of-type(1){
    color:#fafafa;
    transform: scale(0.8);
}
.SafeRc-huan li p:nth-of-type(2){
    color:#3a8e9d;
    transform: scale(0.8);
}
/* 右边底部 */
.SafeR-bottom h6,.SafeR-cont h6{
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #ccc;
}
.SafeR-bottom .SafeR-t{
    border: none;
    margin-bottom: 0.1rem;
}




